<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>12_元素的隐藏_alpha_opacity</title>
    <style>
        .box-hidden {
            /* 
                通过 rgba 来隐藏文字，不显示文字，但是位置
            */
            /* color: rgba(255, 0, 0, 0.3); */
            background-image: url(./images/1.jpg) rgba(0, 0, 0, 0);
            background-size: 200px;

            height: 200px;
            width: 200px;
            background-color: rgba(255, 0, 0, 0.5);
            /* 
                总结：
                    color 的 rgba 影响文字的显示
                    background-color : 影响背景色 
                    background-image : 影响背景图片的显示
                所有的设置只影响当前元素，不会影响到子元素
            */
        }

        .box-hidden2 {
            /* 
                设置 0-1 之间的数字 
                    0 表示完全透明
                    1 表示完全不透明

                会影响当前元素以及所有的子元素

                会保留原来的位置，只是不显示出来而已
            */
            opacity: 0;
        }

        img {
            height: 200px;
        }
    </style>
</head>

<body>
    <div>国内成品油价格迎来“二连涨”。</div>
    <div class="box-hidden">隐藏的div <img src="./images/1.jpg" alt=""></div>
    <div>10月23日，国家发改委发布消息称，自24时起</div>
    <hr>
    <div>国内成品油价格迎来“二连涨”。</div>
    <div class="box-hidden2">隐藏的div
        <img src="./images/1.jpg" alt="">
    </div>
    <div>10月23日，国家发改委发布消息称，自24时起</div>
</body>

</html>